{#each}

Posted on 2023-02-07 by

Svelte has another logic block called the {#each} block.

Let's say I have an array of colors and I want to show all of them in a list.

Usually you would do this:

red
green
blue

App.svelte

<script>
	let colors = ["red", "green", "blue"];
</script>

<ul>
	<li>{colors[0]}</li>
	<li>{colors[1]}</li>
	<li>{colors[2]}</li>
</ul>

But it gets annoying quickly when you want to add a color since you would need to edit the code in two places.

In Javascript we could have some kind of for loop:

let colors = ["red", "green", "blue"];
for (const color of colors) {
	console.log("color");
}

And in Svelte we have something similar, the {#each} logic block.

red
green
blue

App2

<script>
	let colors = ["red", "green", "blue"];
</script>

<ul>
	{#each colors as color}
		<li>{color}</li>
	{/each}
</ul>

Let's try with an object:

red
green
blue

App3

<script>
	let colors = [
		{ name: "red", hex: "#f00" },
		{ name: "green", hex: "#0f0" },
		{ name: "blue", hex: "#00f" },
	];
</script>

<ul>
	{#each colors as color}
		<li style="color: {color.hex};">{color.name}</li>
	{/each}
</ul>

We can also use destructuring syntax :

red
green
blue

App4

<script>
	let colors = [
		{ name: "red", hex: "#f00" },
		{ name: "green", hex: "#0f0" },
		{ name: "blue", hex: "#00f" },
	];
</script>

<ul>
	{#each colors as { name, hex }}
		<li style="color: {hex};">{name}</li>
	{/each}
</ul>

We can have a default value that will be shown when the value is undefined:

red
green
blue
mysterious

App5

<script>
	let colors = [
		{ name: "red", hex: "#f00" },
		{ name: "green", hex: "#0f0" },
		{ name: "blue", hex: "#00f" },
		{ name: "mysterious" },
	];
</script>

<ul>
	{#each colors as { name, hex = "purple" }}
		<li style="color: {hex};">{name}</li>
	{/each}
</ul>

Nested each blocks:

red
#
f
0
0
green
#
0
f
0
blue
#
0
0
f
mysterious
p
u
r
p
l
e

App6

<script>
	let colors = [
		{ name: "red", hex: "#f00" },
		{ name: "green", hex: "#0f0" },
		{ name: "blue", hex: "#00f" },
		{ name: "mysterious" },
	];
</script>

<ul>
	{#each colors as { name, hex = "purple" }}
		<li style="color: {hex};">{name}</li>
    {#each hex as character}
      <li class="list-none">{character}</li>
    {/each}
	{/each}
</ul>

If you add a variable after a comma after the item name you can use it as an index :

red - 0
#
f
0
0
green - 1
#
0
f
0
blue - 2
#
0
0
f
mysterious - 3
p
u
r
p
l
e

App7

<script>
	let colors = [
		{ name: "red", hex: "#f00" },
		{ name: "green", hex: "#0f0" },
		{ name: "blue", hex: "#00f" },
		{ name: "mysterious" },
	];
</script>

<ul>
	{#each colors as { name, hex = "purple" }, i}
		<li style="color: {hex};">{name} - {i}</li>
    {#each hex as character}
      <li class="list-none">{character}</li>
    {/each}
	{/each}
</ul>

If you have an empty array you can display something else using {:else} :

The array is empty 😞

App8

<script>
	let colors = [
		// { name: "red", hex: "#f00" },
		// { name: "green", hex: "#0f0" },
		// { name: "blue", hex: "#00f" },
		// { name: "mysterious" },
	];
</script>

<ul>
	{#each colors as { name, hex = "purple" }, i}
		<li style="color: {hex};">{name} - {i}</li>
    {#each hex as character}
      <li class="list-none">{character}</li>
    {/each}
    {:else}
    <p>The array is empty 😞</p>
	{/each}
</ul>

If your array is undefined you can avoid getting errors by adding ||[] after the array.

The array is empty 😞

App9

<script>
	let colors;
	// let colors = [
	// { name: "red", hex: "#f00" },
	// { name: "green", hex: "#0f0" },
	// { name: "blue", hex: "#00f" },
	// { name: "mysterious" },
	// ];
</script>

<ul>
	{#each colors || [] as { name, hex = "purple" }, i}
		<li style="color: {hex};">{name} - {i}</li>
		{#each hex as character}
			<li class="list-none">{character}</li>
		{/each}
	{:else}
		<p>The array is empty 😞</p>
	{/each}
</ul>